<template>
	<view class="courseEdit-dialog">
		<el-dialog :visible.sync="show1" width="80%" @close="handleClose" zIndex="100" top="10px"
			:close-on-click-modal="false">

			<view class="u-flex">
				<uploadImg :canSetHeader="true" @upload="(images)=>{params.images = images}"
					@remove="(images)=>{params.images = images}" :Images="params.images" title="课效图"
					@setHeader="(images)=>{params.images = images}" :artPptNum="params.number" />

				<uploadImg :canSetHeader="true" @upload="(images)=>{params.longImages = images}"
					@remove="(images)=>{params.longImages = images}" :Images="params.longImages || []" title="预览图"
					@setHeader="(images)=>{params.longImages = images}" :artPptNum="params.number" />
			</view>

			<view class="display_flex" style="margin-bottom: 20rpx;">
				<view style="width: 130rpx;">课程编号：</view>
				<el-input placeholder="请输入课程编号" v-model="params.courceNumber" size="mini" />
			</view>

			<view class="display_flex" style="margin-bottom: 20rpx;">
				<view style="width: 130rpx;">编号：</view>
				<el-input placeholder="请输入编号" v-model="params.number" size="mini" type="number" />
			</view>

			<view class="display_flex_bet">
				<view class="display_flex" style="margin-bottom: 20rpx;">
					<view style="width: 130rpx;">标题：</view>
					<el-input placeholder="请输入标题" v-model="params.title" size="mini" />
					<view @click="uploadPPtFile()">选择文件</view>

					<input type="file" />

				</view>

				<picker :range="sourceFromList" @change="(e)=>params.sourceFrom = sourceFromList[e.detail.value]">
					<view class="display_flex u-m-b-20">
						<view style="width: 220rpx;">所属机构：</view>
						<el-input placeholder="请选择机构" v-model="params.sourceFrom" size="mini" clearable />
					</view>
				</picker>
			</view>


			<view class="display_flex" style="margin-bottom: 20rpx;">
				<view style="width: 130rpx;">描述：</view>
				<el-input placeholder="请输入描述" v-model="params.desc" size="mini" type="textarea" />
			</view>

			<view class="display_flex_bet u-m-b-20">
				<picker :range="fileTypeList" @change="(e)=>params.fileType = fileTypeList[e.detail.value]">
					<view class="display_flex u-m-b-20">
						<view style="width: 220rpx;">资源类型：</view>
						<el-input placeholder="请选择资源类型" v-model="params.fileType" size="mini" readonly />
					</view>
				</picker>

				<view class="display_flex">
					<view style="width: 130rpx;">价格：</view>
					<el-input placeholder="请输入价格" v-model="params.price" size="mini" type="number" />
				</view>
			</view>

			<view class="display_flex_bet u-m-b-20">
				<view class="display_flex u-m-b-20">
					<view style="width: 130rpx;">专题：</view>
					<el-select v-model="params.typeDesc" placeholder="请选择专题" size="mini" style="width: 100%;"
						@change="(e)=>{params.typeId = e}" filterable>
						<el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</view>
				<view class="display_flex u-flex-1 u-row-right">
					<view style="width: 140rpx;">教案工具：</view>
					<!-- <el-select v-model="params.classDesc" placeholder="请选择教案工具" size="mini" style="width: 100%;"
						@change="(e)=>{params.classId = e}">
						<el-option v-for="item in classes" :key="item.value" :label="item.label" :value="item.value" />
					</el-select> -->
					<el-input v-model="params.classDesc" placeholder="请输入教案工具" size="mini" style="width: 120px;" />
					<picker :range="classes" range-key="label" @change="changeClass">
						<text style="margin-left: 20rpx;" class="u-type-primary">选择教案工具</text>
					</picker>
				</view>
			</view>

			<view class="display_flex_bet u-m-b-20">
				<view class="display_flex">
					<view style="width: 150rpx;">最小年龄：</view>
					<el-select v-model="params.ageMin" placeholder="请选择适合年龄的最小值" size="mini" filterable>
						<el-option v-for="item in optionsNianLing" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</view>

				<view class="display_flex">
					<view style="width: 150rpx;">最大年龄：</view>
					<el-select v-model="params.ageMax" placeholder="请选择适合年龄的最大值" size="mini" filterable>
						<el-option v-for="item in optionsNianLing" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</view>
			</view>

			<view class="display_flex_bet u-m-b-20">
				<view class="display_flex" style="margin-bottom: 20rpx;">
					<view style="width: 130rpx;">下载：</view>
					<el-input placeholder="请输入下载次数" v-model="params.downLoadNum" size="mini" />
				</view>


				<view class="display_flex">
					<view>是否是精选内容：</view>
					<el-switch v-model="params.isNice"></el-switch>
				</view>
			</view>

			<view class="display_flex_bet u-m-b-20">
				<view class="display_flex" style="margin-bottom: 20rpx;">
					<view style="width: 130rpx;">标签：</view>
					<view class="display_flex" style="width: calc(100% - 130rpx);">
						<view v-for="(item,index) in params.tags" class="u-m-r-10 u-border display_flex u-p-6 u-font-12">
							<input placeholder="请输入标签" size="mini" @input="inputVlaue($event,index)" :value="item" />
							<i class=" el-icon-remove-outline u-m-r-20 u-font-16" @click="params.tags.splice(index,1)"
								v-if="index != 0" />
							<i class="el-icon-plus u-font-16" @click="params.tags.push('')" />
						</view>
					</view>
				</view>
				<view class="display_flex u-m-b-20" v-if="params.classDesc != '课程'">
					<view style="width: 180rpx;">关联课程：</view>
					<el-select v-model="params.courseId" placeholder="请选择课程" size="mini" style="width: 600rpx;" filterable
						clearable>
						<el-option v-for="item in artPPTCourse" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</view>
			</view>

			<view class="u-m-b-20">
				<!-- 课程的百度网盘链接（可选，兼容旧数据） -->
				<view class="display_flex u-m-b-20" v-if="params.classDesc == '课程'">
					<view style="width: 240rpx;">百度云盘链接：</view>
					<el-input placeholder="可选，用于兼容旧课程数据" size="mini" class="u-m-r-10" v-model="params.baiduDeskLink"
						style="width: 600rpx;" />
					<el-text type="info" style="font-size: 12px;">
						新课程无需填写，通过课件关联实现
					</el-text>
				</view>

				<!-- 课件数量（自动统计） -->
				<view class="display_flex" v-if="params.classDesc == '课程'">
					<view style="width: 240rpx;">课件数量：</view>
					<el-input placeholder="自动统计" size="mini" class="u-m-r-10" v-model="params.page" disabled
						style="width: 200rpx;" />
					<el-text type="success" style="font-size: 12px;">
						📊 系统自动统计关联课件数量
					</el-text>
				</view>

				<!-- 课件的百度网盘链接（必填） -->
				<view class="display_flex" v-if="params.classDesc != '课程'">
					<view style="width: 240rpx;">百度云盘链接：</view>
					<el-input placeholder="课件的百度网盘链接" size="mini" class="u-m-r-10" v-model="params.baiduDeskLink"
						style="width: 600rpx;" />
				</view>
			</view>

			<!-- <view class="u-m-b-20">
				<uploadImg @upload="(images)=>{params.baiduDeskImage = images[0]}"
					@remove="(images)=>{params.baiduDeskImage = ''}" :Images="params.baiduDeskImage? [params.baiduDeskImage]:[]"
					title="百度网盘小程序下载图" :artPptNum="params.number" />
			</view> -->

			<view class="display_flex">
				<view class="display_flex u-flex-1 u-m-b-20">
					<view style="width: 200rpx;">获取方式：</view>
					<el-checkbox-group v-model="params.getType" @change="changeGetType">
						<el-checkbox v-for="item in getTypes" :label="item"></el-checkbox>
					</el-checkbox-group>
				</view>

				<view class="display_flex">
					<view style="width: 200rpx;">审核状态：</view>
					<el-radio-group v-model="params.statusDesc" size="mini">
						<el-radio-button label="已审核"></el-radio-button>
						<el-radio-button label="未审核"></el-radio-button>
					</el-radio-group>
				</view>

			</view>

			<span slot="footer" class="dialog-footer">
				<el-button @click="handleClose" size="mini">取 消</el-button>
				<el-button type="primary" @click="confirmAdd" size="mini">确 定</el-button>
			</span>
		</el-dialog>
	</view>
</template>

<script>

	var COS = require('cos-nodejs-sdk-v5');
	import chooseFile from '@/js_sdk/tencentcloud/choose-file.js';
	import uploadFile from '@/js_sdk/tencentcloud/upload-file.js';
	import getFileAccessUrl from '@/js_sdk/tencentcloud/getFileAccessUrl';

	let that
	export default {
		components: {},
		props: {
			detail: {
				type: Object,
				default: {}
			},
			classDesc: {
				type: String,
				default: "课件"
			}
		},

		data() {
			return {
				show1: true,
				getTypes: ["广告", "付费"],
				myConfig: {
					// 编辑器不自动被内容撑高
					autoHeightEnabled: false,
					// 初始容器高度
					initialFrameHeight: 240,
					// 初始容器宽度
					initialFrameWidth: '100%',
				},
				params: {
					title: "",
					number: this.common.getArtpptNum(),
					courceNumber: '',
					fileType: '课件',
					desc: "",
					classDesc: '',
					classId: '',
					size: '',

					content: "",
					page: 1,
					//groupNum: 0,
					price: 2,
					images: [],
					longImages: [],
					baiduDeskImage: '',
					//age: '通用',
					tags: [""],
					videoUrl: '',
					fileUrls: [],
					type: '单个',
					isNice: false,
					typeDesc: '',
					typeId: "",
					status: 1,
					statusDesc: "已审核",
					baiduDeskLink: '',
					ageMin: 5,
					ageMax: 6,
					downLoadNum: 0,
					courseId: '',
					getType: ["广告", "付费"],
					sourceFrom: '',
				},
				classes: [],
				optionsNianLing: [],

				typeOptions: [],
				optionTypes: [{
					value: '单个',
					label: '单个'
				}, {
					value: '合集',
					label: '合集'
				}],
				fileTypeList: ["课件", "素材"],
				sourceFromList: ["创意少儿美术馆", "黑马画室", "绘画的秘密", "荔枝美术", "指尖美术"],
				artPPTCourse: [],
			}
		},

		mounted() {
			that = this

			var cos = new COS({
				SecretId: "AKIDuc5GAnAG5duuHQJwHL8fusZz80bvykFT", // 推荐使用环境变量获取；用户的 SecretId，建议使用子账号密钥，授权遵循最小权限指引，降低使用风险。子账号密钥获取可参考https://cloud.tencent.com/document/product/598/37140
				SecretKey: "zh8IAm7BxSgdJhpgFXZJmzvd5HDrEK9g", // 推荐使用环境变量获取；用户的 SecretKey，建议使用子账号密钥，授权遵循最小权限指引，降低使用风险。子账号密钥获取可参考https://cloud.tencent.com/document/product/598/37140
			});

			for (let i = 3; i <= 30; i++) {
				let item = {
					label: i,
					value: i
				}
				that.optionsNianLing.push(item)
			}

			if (that.detail) {
				that.detail.getType = that.detail.getType || ["广告", "付费"]
				that.detail.classId = that.detail.ClassId
				// courseId 已经在 detail 中，直接使用
				that.params = JSON.parse(JSON.stringify(that.detail))
				that.$forceUpdate()
			} else {
				//that.params.downLoadNum = ((20 - 0) * Math.random() + 0).toFixed(0)
			}

			that.common.rightApi("admin/artType/list", {}).then(res => {
				res.data = res.data || []
				for (let item of res.data) {
					item.value = item.objectId
					item.label = item.name
				}
				res.data.unshift({
					value: "",
					label: "全部"
				})
				that.typeOptions = res.data

				that.classes = []
				that.common.rightApi("admin/artClass/list", {}).then(res => {
					let classList = res.data
					for (let item of classList) {
						let optionItem = {
							value: item.objectId,
							label: item.name
						}
						that.classes.push(optionItem)
					}
				})
			})

			if (that.classDesc == "课程") {
				that.params.classDesc = "课程"
				that.params.fileType = "课程"
			} else {
				that.$http.Post("admin/artPPT/list", {
					pageSize: 20,
					pageNum: 1,
					fileType: '课程',
					searchText: '',
					isNice: false,
					status: '全部',
				}, "加载中...").then(res => {
					for (let item of res.data) {
						item.value = item.objectId
						item.label = item.title
					}
					that.artPPTCourse = res.data
				})
			}
		},

		methods: {

			changeGetType(val) {
				console.log(val)
				that.params.getType = val
			},

			changeClass(e) {
				that.params.classDesc = that.classes[e.detail.value].label
				if (that.params.classDesc == "课程") {
					that.params.fileType = "课程"
				}
			},

			//新增合集
			addHeJi() {
				that.params.fileUrls.push({
					title: '',
					desc: '',
					fileUrl: '',
					baiduDeskLink: '',
				})
				that.common.showToast("成功")
			},

			//上传ppt
			uploadPPtFile(item) {
				let fileType = ".ppt,.pdf,.pptx,.doc"
				if (that.params.fileType == "素材") fileType = '.png,.jpg,.jpeg'
				chooseFile(fileType, false).then(file => {
					console.log(file)

					if (file.name) {
						that.params.title = file.name
						that.params.desc = file.name
						that.params.size = that.change(file.size)
						if (that.params.title.indexOf(".") != -1) that.params.title = that.params.title
							.split(".")[0]
						if (that.params.title.indexOf("、 ") != -1) {
							that.params.title = that.params.title
								.split("、 ")[1]
							that.params.desc = that.params.title
								.split("、 ")[1]
						}
						
						if (that.params.title.indexOf("《") != -1) that.params.title = that.params.title
							.split("《")[1]
						if (that.params.title.indexOf("》") != -1) that.params.title = that.params.title
							.split("》")[0]

						uni.uploadFile({
							url: 'http://127.0.0.1:5000/', //仅为示例，非真实的接口地址
							filePath: file.path,
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: (uploadFileRes) => {
								console.log(uploadFileRes.data);
							},
							fail(err){
								console.log(err)
							}
						});

						
					}
				})
			},

			getMediaType(ext) {
				if (/^(jpg|jpeg|png|gif|bmp|webp)$/.test(ext.toLowerCase())) {
					return 'image';
				}
				if (/^(mp4|mpeg|qsv|mov|avi|3gp)$/.test(ext.toLowerCase())) {
					return 'video';
				}
				if (/^(mp3|wma|wav|m4a)$/.test(ext.toLowerCase())) {
					return 'audio';
				}
				return 'other';
			},

			//删除文件
			clearFile(fileUrl) {
				let that = this
				that.$http.Post("txMac/deleteCosFile", {
					imageUrl: fileUrl
				}, "删除中").then(res => {
					if (that.params.type == "单个") {
						that.params.fileUrls = []
					}
				})
			},

			handleClose() {
				this.$emit("close", true)
			},

			inputVlaue(e, index) {
				that.params.tags[index] = e.detail.value
			},

			confirmAdd() {
				this.params.isAdmin = true
				this.$http.Post("admin/artPPT/save ", this.params).then(res => {
					this.$emit("save", true)
				})
			},

			change(limit) {
				var size = "";
				if (limit < 0.5 * 1024) { //小于0.1KB，则转化成B
					size = limit.toFixed(2) + "B"
				} else if (limit < 0.5 * 1024 * 1024) { //小于0.1MB，则转化成KB
					size = (limit / 1024).toFixed(2) + "KB"
				} else if (limit < 0.5 * 1024 * 1024 * 1024) { //小于0.2GB，则转化成MB
					size = (limit / (1024 * 1024)).toFixed(2) + "MB"
				} else { //其他转化成GB
					size = (limit / (1024 * 1024 * 1024)).toFixed(2) + "GB"
				}

				var sizeStr = size + ""; //转成字符串
				var index = sizeStr.indexOf("."); //获取小数点处的索引
				var dou = sizeStr.substr(index + 1, 2) //获取小数点后两位的值
				if (dou == "00") { //判断后两位是否为00，如果是则删除00                
					return sizeStr.substring(0, index) + sizeStr.substr(index + 3, 2)
				}
				return size;
			},


		}
	}
</script>

<style scoped>
/* ==================== 基础样式 ==================== */
.display_flex {
	display: flex;
	align-items: center;
}

.display_flex_bet {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

/* ==================== 弹窗样式 ==================== */
.courseEdit-dialog >>> .el-dialog {
	background: linear-gradient(135deg, rgba(15, 20, 40, 0.95) 0%, rgba(26, 31, 58, 0.95) 50%, rgba(15, 20, 25, 0.95) 100%) !important;
	backdrop-filter: blur(20px);
	border: 1px solid rgba(0, 212, 255, 0.3);
	border-radius: 16px;
	box-shadow:
		0 8px 32px rgba(0, 0, 0, 0.5),
		inset 0 1px 0 rgba(255, 255, 255, 0.05),
		0 0 40px rgba(0, 212, 255, 0.15);
	animation: dialogSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes dialogSlideIn {
	from {
		opacity: 0;
		transform: translateY(-30px) scale(0.95);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.courseEdit-dialog >>> .el-dialog__header {
	padding: 20px 30px;
	border-bottom: 1px solid rgba(0, 212, 255, 0.2);
}

.courseEdit-dialog >>> .el-dialog__title {
	color: #00d4ff !important;
	font-size: 18px;
	font-weight: 600;
	text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}

.courseEdit-dialog >>> .el-dialog__body {
	padding: 30px;
	color: rgba(255, 255, 255, 0.9);
	max-height: 70vh;
	overflow-y: auto;
}

/* 弹窗滚动条样式 */
.courseEdit-dialog >>> .el-dialog__body::-webkit-scrollbar {
	width: 8px;
}

.courseEdit-dialog >>> .el-dialog__body::-webkit-scrollbar-track {
	background: rgba(15, 20, 40, 0.3);
	border-radius: 4px;
}

.courseEdit-dialog >>> .el-dialog__body::-webkit-scrollbar-thumb {
	background: linear-gradient(135deg, #00d4ff 0%, #0084ff 100%);
	border-radius: 4px;
	box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}

.courseEdit-dialog >>> .el-dialog__body::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(135deg, #00e4ff 0%, #0094ff 100%);
}

.courseEdit-dialog >>> .el-dialog__footer {
	padding: 20px 30px;
	border-top: 1px solid rgba(0, 212, 255, 0.2);
	text-align: right;
}

.courseEdit-dialog >>> .el-dialog__close {
	color: rgba(255, 255, 255, 0.6) !important;
	font-size: 20px;
	transition: all 0.3s ease;
}

.courseEdit-dialog >>> .el-dialog__close:hover {
	color: #00d4ff !important;
}

/* ==================== 输入框样式 ==================== */
.courseEdit-dialog >>> .el-input__inner {
	background: rgba(15, 20, 40, 0.6) !important;
	border: 1px solid rgba(0, 212, 255, 0.3) !important;
	color: #fff !important;
	border-radius: 8px;
	transition: all 0.3s ease;
	padding: 0 15px;
}

.courseEdit-dialog >>> .el-input__inner:focus {
	border-color: #00d4ff !important;
	box-shadow: 0 0 15px rgba(0, 212, 255, 0.4) !important;
	background: rgba(15, 20, 40, 0.8) !important;
}

.courseEdit-dialog >>> .el-input__inner::placeholder {
	color: rgba(255, 255, 255, 0.4);
}

.courseEdit-dialog >>> .el-input.is-disabled .el-input__inner {
	background: rgba(15, 20, 40, 0.4) !important;
	color: rgba(255, 255, 255, 0.5) !important;
	cursor: not-allowed;
}

/* textarea 样式 */
.courseEdit-dialog >>> .el-textarea__inner {
	background: rgba(15, 20, 40, 0.6) !important;
	border: 1px solid rgba(0, 212, 255, 0.3) !important;
	color: #fff !important;
	border-radius: 8px;
	transition: all 0.3s ease;
	padding: 10px 15px;
	min-height: 80px !important;
}

.courseEdit-dialog >>> .el-textarea__inner:focus {
	border-color: #00d4ff !important;
	box-shadow: 0 0 15px rgba(0, 212, 255, 0.4) !important;
	background: rgba(15, 20, 40, 0.8) !important;
}

.courseEdit-dialog >>> .el-textarea__inner::placeholder {
	color: rgba(255, 255, 255, 0.4);
}

/* ==================== 选择器样式 ==================== */
.courseEdit-dialog >>> .el-select .el-input__inner {
	cursor: pointer;
}

.courseEdit-dialog >>> .el-select .el-input__suffix {
	color: #00d4ff;
}

/* 下拉框样式 */
.el-select-dropdown {
	background: rgba(15, 20, 40, 0.95) !important;
	backdrop-filter: blur(20px);
	border: 1px solid rgba(0, 212, 255, 0.3) !important;
	border-radius: 8px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 212, 255, 0.2);
}

.el-select-dropdown .el-select-dropdown__item {
	color: rgba(255, 255, 255, 0.9) !important;
	background: transparent !important;
	transition: all 0.3s ease;
}

.el-select-dropdown .el-select-dropdown__item:hover {
	background: rgba(0, 212, 255, 0.2) !important;
	color: #00d4ff !important;
}

.el-select-dropdown .el-select-dropdown__item.selected {
	background: rgba(0, 212, 255, 0.15) !important;
	color: #00d4ff !important;
	font-weight: 600;
}

/* ==================== 开关样式 ==================== */
.courseEdit-dialog >>> .el-switch__core {
	border: 1px solid rgba(0, 212, 255, 0.3);
	background: rgba(15, 20, 40, 0.6) !important;
	transition: all 0.3s ease;
}

.courseEdit-dialog >>> .el-switch.is-checked .el-switch__core {
	border-color: #00d4ff;
	background: linear-gradient(135deg, #00d4ff 0%, #0084ff 100%) !important;
	box-shadow: 0 0 15px rgba(0, 212, 255, 0.4);
}

/* ==================== 单选按钮组样式 ==================== */
.courseEdit-dialog >>> .el-radio-button__inner {
	background: rgba(15, 20, 40, 0.6) !important;
	border: 1px solid rgba(0, 212, 255, 0.3) !important;
	color: rgba(255, 255, 255, 0.9) !important;
	border-radius: 6px;
	transition: all 0.3s ease;
	padding: 8px 15px;
}

.courseEdit-dialog >>> .el-radio-button__inner:hover {
	background: rgba(0, 212, 255, 0.15) !important;
	border-color: #00d4ff !important;
	color: #00d4ff !important;
}


.courseEdit-dialog >>> .el-radio-button.is-active .el-radio-button__inner {
	background: linear-gradient(135deg, #00d4ff 0%, #0084ff 100%) !important;
	border-color: #00d4ff !important;
	color: #fff !important;
	box-shadow: 0 0 15px rgba(0, 212, 255, 0.5);
	font-weight: 600;
}

.courseEdit-dialog >>> .el-radio-group {
	display: flex;
	gap: 10px;
}

/* ==================== 复选框组样式 ==================== */
.courseEdit-dialog >>> .el-checkbox {
	color: rgba(255, 255, 255, 0.9) !important;
	margin-right: 20px;
}

.courseEdit-dialog >>> .el-checkbox__inner {
	background: rgba(15, 20, 40, 0.6) !important;
	border: 1px solid rgba(0, 212, 255, 0.3) !important;
	transition: all 0.3s ease;
}

.courseEdit-dialog >>> .el-checkbox__inner:hover {
	border-color: #00d4ff !important;
}


.courseEdit-dialog >>> .el-checkbox__input.is-checked .el-checkbox__inner {
	background: linear-gradient(135deg, #00d4ff 0%, #0084ff 100%) !important;
	border-color: #00d4ff !important;
	box-shadow: 0 0 10px rgba(0, 212, 255, 0.4);
}

.courseEdit-dialog >>> .el-checkbox__label {
	color: rgba(255, 255, 255, 0.9) !important;
}

/* ==================== 按钮样式 ==================== */
.courseEdit-dialog >>> .el-button {
	border-radius: 8px;
	padding: 10px 24px;
	font-weight: 500;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
}

/* 主按钮样式 */
.courseEdit-dialog >>> .el-button--primary {
	background: linear-gradient(135deg, #00d4ff 0%, #0084ff 100%) !important;
	border: none !important;
	color: #fff !important;
	box-shadow: 0 4px 15px rgba(0, 212, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.courseEdit-dialog >>> .el-button--primary:hover {
	box-shadow: 0 4px 15px rgba(0, 212, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* 默认按钮样式（取消按钮） */
.courseEdit-dialog >>> .el-button--default {
	background: rgba(15, 20, 40, 0.6) !important;
	border: 1px solid rgba(0, 212, 255, 0.3) !important;
	color: rgba(255, 255, 255, 0.9) !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.courseEdit-dialog >>> .el-button--default:hover {
	background: rgba(0, 212, 255, 0.15) !important;
	border-color: #00d4ff !important;
	color: #00d4ff !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* ==================== 标签样式 ==================== */
view {
	color: rgba(255, 255, 255, 0.9);
}

.u-type-primary {
	color: #00d4ff !important;
	cursor: pointer;
	transition: all 0.3s ease;
	padding: 6px 12px;
	border-radius: 6px;
	background: rgba(0, 212, 255, 0.1);
}

.u-type-primary:hover {
	background: rgba(0, 212, 255, 0.2);
	box-shadow: 0 0 10px rgba(0, 212, 255, 0.4);
}


/* 标签输入框样式 */
.u-border {
	border: 1px solid rgba(0, 212, 255, 0.3);
	border-radius: 6px;
	background: rgba(15, 20, 40, 0.4);
	transition: all 0.3s ease;
}

.u-border:hover {
	border-color: #00d4ff;
	background: rgba(15, 20, 40, 0.6);
}

.u-border input {
	background: transparent;
	border: none;
	color: #fff;
	outline: none;
	padding: 4px 8px;
	min-width: 100px;
}

.u-border input::placeholder {
	color: rgba(255, 255, 255, 0.4);
}

/* 图标按钮样式 */
.el-icon-remove-outline,
.el-icon-plus {
	color: #00d4ff;
	cursor: pointer;
	transition: all 0.3s ease;
}

.el-icon-remove-outline:hover {
	color: #ff6b9d;
}

.el-icon-plus:hover {
	color: #00e4ff;
}


/* ==================== 工具类样式 ==================== */
.u-m-b-20 {
	margin-bottom: 20px;
}

.u-m-r-10 {
	margin-right: 10px;
}

.u-m-r-20 {
	margin-right: 20px;
}

.u-flex {
	display: flex;
}

.u-flex-1 {
	flex: 1;
}

.u-row-right {
	justify-content: flex-end;
}

.u-p-6 {
	padding: 6px;
}

.u-font-12 {
	font-size: 12px;
}

.u-font-16 {
	font-size: 16px;
}

/* ==================== 响应式优化 ==================== */
@media (max-width: 1200px) {
	.courseEdit-dialog >>> .el-dialog {
		width: 90% !important;
	}

	.display_flex_bet {
		flex-direction: column;
		align-items: flex-start;
		gap: 15px;
	}
}
</style>